<!--
 * @Descripttion: 
 * @Author: YuZhenJing
 * @Date: 2020-06-21 10:26:29
 * @LastEditors: YuZhenJing
 * @LastEditTime: 2020-06-21 10:44:04
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" name="regTest" />
    <span></span>
    <script>
      // 理解边界
      // ^ 表示 开始
      // $ 表示 结束
      // 如果正则中存在^$则表示根据规则匹配整个字符串
      document
        .querySelector("[name='regTest']")
        .addEventListener("keyup", function () {
          // 此处没有增加 ^ $ 则表示匹配的字符串中包含 正则 便是成功
          // 很明显我们的正则要求是 3到6位的字母，但此处7位以上也是成功
          console.log(this.value.match(/[a-z]{3,6}/));

          // 加上 ^ $ 则表示整个字符串是3到6位便是成功
          let flag = this.value.match(/^[a-z]{3,6}$/);
          console.log(flag);

          document.querySelector("span").innerHTML = flag ? "成功" : "失败";
        });
    </script>
  </body>
</html>
